<template>
	<view>
		<top-blank></top-blank>
		<top-common @backPage="backPage" :titleContent="titleContent"></top-common>
		<view class="accessories-use">
			<view class="accessories-use-title">配件使用</view>
			<scroll-view class="scroll-accessories" scroll-y="true">
				<view v-for="(item,index) in accessoriesUseDataList">
					<accessories-use-item @changeUseAccessoriesState="changeUseAccessoriesState"
						:accessoriesName="item.partName" :confirmUse="item.isFinished" :number="item.amount">
					</accessories-use-item>
				</view>
			</scroll-view>
		</view>

		<!-- 服务费用弹窗 -->
		<view class="bottomBtn">
			<!-- <bottom-submit @submitMes="submitMes" title="维修完成" class="bottom-submit-style"></bottom-submit> -->
			<bottom-submit @click="open" title="维修完成" class="bottom-submit-style"></bottom-submit>
			<uni-popup ref="popup" background-color="#4f4f4f" type="center">
				<view class="box">
					<view class="title">
						服务费用
					</view>
					<view class="inputBox">
						<label>￥</label>
						<input placeholder="请输入服务费用" type="text" v-model="maintenanceCost">
					</view>
					<view class="confirm">
						<button class="sendDataStyle" @click="sendData">确认</button>
						<button class="cacleStyle" @click="close">取消</button>
					</view>
				</view>
			</uni-popup>
		</view>


	</view>
</template>

<script>
	import MyStore from '@/store/index.js'
	import config from "@/config"; // 导入配置文件
	// 基本路径
	const baseURL = config.baseURL;

	export default {
		data() {
			return {
				titleContent: "维修中",
				accessoriesUseDataList: [], //配件使用列表
				maintenanceCost: "", //维修费用
			};
		},
		methods: {
			open() {
				console.log("点击了“维修完成”按钮");
				// 发起请求 修改状态
				// let orderId = MyStore.getters.getClickOrderStailsId;
				// let that = this;
				// const token = uni.getStorageSync('token');
				// uni.request({
				// 	url: `${baseURL}/order/next`,
				// 	method: 'POST',
				// 	data: {
				// 		"id": orderId
				// 	},
				// 	header: {
				// 		"token": token
				// 	},
				// 	success(res) {
				// 		console.log("修改状态为“维修完成”的响应：", res);
				// 	},
				// 	fail(err) {
				// 		console.log("维修完成请求失败", err);
				// 		uni.showToast({
				// 			title: "服务器罢工了",
				// 			image: '/static/image/icon/Disconnected.png',
				// 			duration: 2000
				// 		})
				// 	}
				// })


				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.maintenanceCost = "" //置空
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 维修完成  确认
			 */
			sendData() {
				this.close();
				console.log("点击了“确认”按钮", this.maintenanceCost);
				let orderId = MyStore.getters.getClickOrderStailsId;
				let that = this;
				const token = uni.getStorageSync('token');
				uni.request({
					url: `${baseURL}/order/next`,
					method: 'POST',
					data: {
						"id": orderId,
						"serveAmount": that.maintenanceCost
					},
					header: {
						"token": token
					},
					success(res) {
						console.log("维修完成的相应数据：", res);
						if (res.data.code == 200) {
							uni.redirectTo({
								url: '/pages/maintenance-worker/maintenance-worker'
							})
						}
					},
					fail(err) {
						console.log("维修完成请求失败", err);
					}
				})
			},
			backPage() {
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			},
			/**
			 * 配件使用状态修改
			 * @param {Object} localConfirmUse
			 * @param {Object} accessoriesName
			 */
			changeUseAccessoriesState(localConfirmUse, accessoriesName) {
				console.log("维修页面打印配件即将使用状态为：", localConfirmUse);
				let orderId = MyStore.getters.getClickOrderStailsId;

				if (localConfirmUse == 0) {
					console.log("该配件改为未使用状态0");
					const token = uni.getStorageSync('token');
					uni.request({
						url: `${baseURL}/orderPart/update`,
						method: 'POST',
						data: {
							"orderId": orderId,
							"partName": accessoriesName,
							"isFinished": "0",
						},
						header: {
							"token": token
						},
						success(res) {
							console.log("修改状态成功", res);
							uni.showToast({
								title: '已取消使用该配件',
								duration: 1000,
								icon: 'success'
							})
						},
						fail(err) {
							console.log("修改状态失败", err);
							uni.showToast({
								title: '修改状态失败',
								duration: 1000,
								icon: 'success'
							})
						}
					})
				} else if (localConfirmUse == 1) {
					console.log("该配件改为确认使用状态1");
					const token = uni.getStorageSync('token');
					uni.request({
						url: `${baseURL}/orderPart/update`,
						method: 'POST',
						data: {
							"orderId": orderId,
							"partName": accessoriesName,
							"isFinished": "1",
						},
						header: {
							"token": token
						},
						success(res) {
							console.log("修改状态成功", res);
							uni.showToast({
								title: '已确定使用该配件',
								duration: 1000,
								icon: 'success'
							})
						},
						fail(err) {
							console.log("修改状态失败", err);
							uni.showToast({
								title: '修改状态失败',
								duration: 1000,
								icon: 'success'
							})
						}
					})

				}


			}
		},
		/**
		 * 初始加载配件使用情况
		 */
		onLoad() {
			let orderId = MyStore.getters.getClickOrderStailsId;
			if (orderId != -100) {
				let that = this;
				const token = uni.getStorageSync('token');
				// 插入表tb_order_part
				uni.request({
					url: `${baseURL}/orderPart/get/${orderId}/page/1`,
					method: 'GET',
					header: {
						"token": token
					},
					success(res) {
						console.log("打印获取维修中配件使用列表返回信息：", res);
						that.accessoriesUseDataList = res.data.data.records;
					},
					fail(err) {
						console.log("选件完成请求失败", err);
					}

				})
			} else {
				console.log("未选择查看任何工单的详情");
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #333333;
	}



	.accessories-use {
		height: 70vh;
		margin: 50rpx 10rpx 0;
		border-radius: 20rpx;
		border-left: 4rpx solid #ffb612;
		border-right: 4rpx solid #ffb612;
		background-color: #4f4f4f;

		.accessories-use-title {
			margin: 50rpx 0 0 20rpx;
			color: #ffb612;
			font-size: 35rpx;
			font-weight: 600;
			padding: 10rpx 0;

			border-bottom: 2rpx solid #ffb612;
		}

		.scroll-accessories {
			margin-top: 20rpx;
			height: 85%;
			// background-color: #ffb612;
		}
	}

	.bottomBtn {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;

		.box {
			display: flex;
			flex-direction: column;
			width: 70vw;
			padding: 40rpx;
			border: 2rpx solid #ffb612;
			border-radius: 10rpx;

			.title {
				color: #ffb612;
				font-size: 35rpx;
				font-weight: 600;
			}

			.inputBox {
				display: flex;
				justify-content: center;
				align-items: center;

				label {
					color: #ffb612;
				}

				input {
					margin: 30rpx 10rpx;
					border: 2rpx solid #bbbbbb;
					border-radius: 10rpx;
					width: 50vw;
					padding: 5rpx;
				}

				input[type="text"]::placeholder {
					color: white !important;
				}

			}

			.confirm {
				display: flex;
				text-align: center;

				.sendDataStyle {
					width: 20vw;
					height: 5vh;
					line-height: 5vh;
					color: white;
					background-color: #ffb612;
				}

				.cacleStyle {
					width: 20vw;
					height: 5vh;
					line-height: 5vh;
					color: white;
					background-color: #333333;
				}
			}
		}
	}
</style>